<!--车辆管理-->
<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <!--搜索条件-->
            <el-row class="text-left">

                <el-col :span="13">
                    <div class="dlblock-mb20">
                        <span class="pr5">车牌号</span>
                        <el-input :maxlength="10" clearable placeholder="请输入车牌号" show-word-limit
                                  size="medium" style="width: 150px;" v-model.trim="query.no"></el-input>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">自编号</span>
                        <el-input :maxlength="15" clearable placeholder="请输入自编号" show-word-limit
                                  size="medium" style="width: 150px;" v-model.trim="query.code"></el-input>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">机构名</span>
                        <el-cascader
                                :options="groupTree"
                                :props="{ value: 'orgId', label: 'orgName',checkStrictly: true }"
                                :show-all-levels="false" clearable
                                style="width: 150px;"
                                v-model="groupId"></el-cascader>
                    </div>

                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="query.pageNum = 1,queryVehicle()" circle
                                   class="el-icon-search ml5"></el-button>
                    </div>
                </el-col>

                <el-col :span="10 " align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button @click="addVehicles" type="primary">添加</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="deleteAll" type="danger">删除</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="downloadBtn()" type="primary">下载模板</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-upload
                                class="upload-demo"
                                ref="upload"
                                :action="config.baseURL + '/api/web/taxi/ba/vehicle/importVehicles'"
                                :on-preview="handlePreview1"
                                :on-remove="handleRemove1"
                                :file-list="fileList1"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">模板导入</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                                确定导入
                            </el-button>
                        </el-upload>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="exportVehicle1" type="info">导出列表</el-button>
                    </div>
                </el-col>

            </el-row>

            <!--弹出框-->
            <el-row>
                <el-dialog
                        :before-close="handleClose"
                        :visible.sync="dialogVisible"
                        title="车量管理"
                        width="60%">
                    <el-row>
                        <el-tabs @tab-click="handleClick" v-model="activeName">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form :model="form" :rules="rules" label-position="right" label-width="100px"
                                         ref="ruleForm">
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="车牌号" prop="no">
                                                <el-input clearable maxlength="10"
                                                          show-word-limit style="width: 250px"
                                                          v-model.trim="form.no"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="自编号" prop="code">
                                                <el-input clearable maxlength="10"
                                                          show-word-limit style="width: 250px"
                                                          v-model.trim="form.code"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="机构名称" prop="groupId">
                                                <el-cascader
                                                        :options="groupTree"
                                                        :props="{ value: 'orgId', label: 'orgName',checkStrictly: true }"
                                                        :show-all-levels="false"
                                                        @change="groupChange" clearable
                                                        style="width: 250px"
                                                        v-model="form.groupId"></el-cascader>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="绑定车主">
                                                <el-select clearable collapse-tags multiple
                                                           placeholder="请选择" style="width: 250px"
                                                           v-model="staffId">
                                                    <el-option
                                                            :key="item.empId"
                                                            :label="item.name"
                                                            :value="item.empId"
                                                            v-for="item in staffs"
                                                    >
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="绑定设备">
                                                <el-select clearable collapse-tags multiple
                                                           placeholder="请选择" style="width: 250px"
                                                           v-model="deviceId">
                                                    <el-option
                                                            :key="item.deviceId"
                                                            :label="item.no"
                                                            :value="item.deviceId"
                                                            v-for="item in devices"
                                                    >
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="车辆类型" prop="deviceType">
                                                <el-cascader :options="brandTree"
                                                             clearable
                                                             style="width: 250px"
                                                             v-model="form.deviceType"></el-cascader>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="运营类型" prop="operation">
                                                <el-select clearable placeholder="请选择" style="width: 250px"
                                                           v-model="form.operation">
                                                    <el-option
                                                            :key="item.value"
                                                            :label="item.name"
                                                            :value="item.value"
                                                            v-for="item in operationTypeEnum">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="行驶证号" prop="drivingNo">
                                                <el-input clearable maxlength="10" placeholder="请输入内容"
                                                          show-word-limit
                                                          style="width: 250px"
                                                          v-model.trim="form.drivingNo"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="运营证号" prop="operationNo">
                                                <el-input clearable maxlength="10" placeholder="请输入内容"
                                                          show-word-limit
                                                          style="width: 250px"
                                                          v-model.trim="form.operationNo"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="年检保险" name="second">
                                <el-form label-position="right" label-width="150px">
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="注册日期">
                                                <el-date-picker
                                                        placeholder="选择日期"
                                                        style="width: 250px"
                                                        type="date"
                                                        v-model="form.date1">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="购置日期">
                                                <el-date-picker
                                                        placeholder="选择日期"
                                                        style="width: 250px"
                                                        type="date"
                                                        v-model="form.date2">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="年检周期">
                                                <el-input clearable maxlength="10"
                                                          show-word-limit style="width: 250px"
                                                          v-model.number="form.period"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="年审日期">
                                                <el-date-picker
                                                        placeholder="选择日期"
                                                        style="width: 250px"
                                                        type="date"
                                                        v-model="form.inspect">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="交强险到期日期">
                                                <el-date-picker
                                                        placeholder="选择日期"
                                                        style="width: 250px"
                                                        type="date"
                                                        v-model="form.compulsory">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="三责险到期日期">
                                                <el-date-picker
                                                        placeholder="选择日期"
                                                        style="width: 250px"
                                                        type="date"
                                                        v-model="form.personLiability">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="车损险到期日期">
                                                <el-date-picker
                                                        placeholder="选择日期"
                                                        style="width: 250px"
                                                        type="date"
                                                        v-model="form.vehicleDamage">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="三责险赔付额度">
                                                <el-input clearable maxlength="10"
                                                          show-word-limit style="width: 250px"
                                                          v-model.number="form.insureClaims1"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="车损险赔付额度">
                                                <el-input clearable maxlength="10"
                                                          show-word-limit style="width: 250px"
                                                          v-model.number="form.insureClaims2"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="车上人员险赔付额度">
                                                <el-input clearable maxlength="10"
                                                          show-word-limit style="width: 250px"
                                                          v-model.number="form.insureClaims3"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="商业险附加选项">
                                                <el-select clearable placeholder="请选择" style="width: 250px"
                                                           v-model="form.medigaps">
                                                    <el-option :value="0x01" label="车上人员责任险"></el-option>
                                                    <el-option :value="0x02" label="已投保抢盗险"></el-option>
                                                    <el-option :value="0x04" label="已投保划痕险"></el-option>
                                                    <el-option :value="0x08" label="已投保玻璃险"></el-option>
                                                    <el-option :value="0x10" label="已投保自燃险"></el-option>
                                                    <el-option :value="0x20" label="已投保涉水险"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="所有者类型">
                                                <el-select clearable placeholder="请选择" style="width: 250px"
                                                           v-model="form.ownerType">
                                                    <el-option :value="1" label="公司"></el-option>
                                                    <el-option :value="2" label="个人"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="车辆照片" name="third">
                                <el-upload
                                        :action="config.baseURL + '/api/web/file/upload/'"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="success"
                                        :limit="5"
                                        :file-list="fileList"
                                        list-type="picture-card">

                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleUp">
                                    <img :src="dialogImageUrl" alt="" width="100%">
                                </el-dialog>
                            </el-tab-pane>
                        </el-tabs>
                    </el-row>

                    <span class="dialog-footer" slot="footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button @click="insertVehicle('ruleForm')" type="primary">确 定</el-button>
                    </span>
                </el-dialog>
            </el-row>

            <!--表格-->
            <el-row>
                <el-table
                        :data="vehicleList"
                        @selection-change="selectionchange"
                        border
                        class="my-table"
                        header-row-class-name="my-table-header" stripe
                        v-loading="loading">

                    <el-table-column align="center" fixed type="selection" width="80">
                    </el-table-column>
                    <el-table-column align="center" label="机构名称" prop="groupName" width="100px"></el-table-column>
                    <el-table-column align="center" label="车牌号" prop="no" width="100"></el-table-column>
                    <el-table-column align="center" label="自编号" prop="code"></el-table-column>
                    <el-table-column align="center" label="车辆型号" prop="modelName"></el-table-column>
                    <el-table-column :formatter="deviceName" align="center" label="已安装设备"
                                     prop="deviceName"></el-table-column>
                    <el-table-column align="center" label="注册日期" prop="registrationDate"></el-table-column>
                    <el-table-column align="center" label="运营类型" prop="operationName"></el-table-column>
                    <el-table-column align="center" label="车辆行驶证" prop="drivingNo"></el-table-column>
                    <el-table-column align="center" label="车辆运营证" prop="operationNo"></el-table-column>
                    <el-table-column align="center" :formatter="ownerName" label="车主"
                                     prop="ownerName"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="150">
                        <template slot-scope="{row}">
                            <p>
                                <el-button @click="edit(row)" style="color: #409eff" type="text">编辑
                                </el-button>
                                <el-button @click="deleteOne(row.vehicleId)" style="color: #f56c6c" type="text">删除
                                </el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <br>

            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :offset="6" :span="12" align="center">
                    <el-pagination :current-page="query.pageNum" :page-size="query.pageSize" :total="query.total"
                                   @current-change="pageChange"
                                   background layout="total, prev, pager, next">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>
    </div>

</template>

<script>

    import {
        addVehicle,
        deleteVehicle,
        getBrandTree,
        getDeviceInfo,
        getEmployees,
        getGroupTree,
        getOperationTypeEnum,
        getVehicleInfo
    } from '@/api';
    // import {myDate1} from '@/utils/common.js'
    import config from '@/utils/config';

    export default {
        name: "index",
        components: {},
        data() {
            return {

                fileList1: [],

                //接收导入 的 config
                config,

                //设备id
                deviceId: [],
                devices: [],

                //人员id
                staffId: [],
                staffs: [],

                //运营类型枚举
                operationTypeEnum: [],

                //品牌树
                brandTree: [],
                //分组数
                groupTree: [],
                groupId: [],

                //校验规则
                rules: {
                    no: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    deviceType: [
                        {required: true, message: '请选择车辆类型', trigger: 'blur'},
                    ],
                    operation: [
                        {required: true, message: '请选择运营类型', trigger: 'change'},
                    ],
                    groupId: [
                        {required: true, message: '请选择机构', trigger: 'change'},
                    ],
                    drivingNo: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    operationNo: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                },

                //标签页
                activeName: 'first',

                //加载动画
                loading: false,

                dialogVisible: false,

                //图片上传
                fileList: [],
                dialogImageUrl: '',
                dialogVisibleUp: false,

                images: [],

                //车辆列表
                vehicleList: [],

                //查询参数
                query: {
                    no: '',
                    code: '',
                    groupName: '',
                    routeName: '',
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },

                //导出参数
                exportVehicleVal: {
                    fromPage: 1,
                    toPage: 1,
                },

                //多选id
                vehicleIds: [],

                //表单数据
                form: {
                    operation: '',
                    deviceType: [],
                    groupId: []
                }
            }

        },
        watch: {},

        methods: {

            //设备数组格式化
            deviceName(row) {
                let arr = []
                row.deviceName.forEach((item) => {
                    arr.push(item);
                })
                return arr.join(',')
            },

            //车组数据格式化
            ownerName(row) {
                let arr = []
                row.ownerName.forEach((item) => {
                    arr.push(item);
                })
                return arr.join(',')
            },

            //点击添加车辆
            addVehicles() {
                this.form = {}
                this.form.deviceType = []
                this.form.groupId = []
                this.staffId = []
                this.deviceId = []
                this.form.operation = 0
                this.fileList = []
                this.dialogVisible = true;
            },

            //移除图片
            handleRemove(file, fileList) {
                this.fileList = fileList
            },

            //图片上传成功
            success(response, file, fileList) {
                this.fileList.push({
                    url: config.baseURL + response.data,
                    uid: file.uid
                })
            },

            //放大图片
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisibleUp = true;
            },

            //机构值改变
            groupChange(group) {
                this.deviceId = []
                this.staffId = []
                if (group != undefined) {
                    let groupId = group[group.length - 1]

                    //获取设备
                    getDeviceInfo({groupId: groupId}).then(res => {
                        if (res.code === 200) {
                            this.devices = res.data.list
                        }
                    }).catch(() => {
                    });

                    //获取人员
                    getEmployees({groupId: groupId}).then(res => {
                        if (res.code === 200) {
                            this.staffs = res.data.list
                        }
                    }).catch(() => {
                    });

                }
            },

            //获取类型枚举
            getEnums() {
                getOperationTypeEnum().then(res => {
                    if (res.code === 200) {
                        this.operationTypeEnum = res.data
                    }
                }).catch(() => {
                });

                //获取分组数
                getGroupTree({}).then(res => {
                    if (res.code == 200) {
                        this.groupTree = res.data.children
                    }
                })
            },

            //车辆编辑
            edit(row) {
                this.dialogVisible = true
                this.activeName = 'first'
                this.fileList = []
                let images = row.images;
                images.forEach(x => {
                    this.fileList.push({
                        url: x
                    })
                })
                this.form = row

                //获取设备
                if (this.form.groupId != null) {
                    let groupId = this.form.groupId
                    getDeviceInfo({groupId: groupId}).then(res => {
                        if (res.code === 200) {
                            this.deviceId = this.form.deviceId
                            this.devices = res.data.list
                        }
                    }).catch(() => {
                    });

                    //获取人员
                    getEmployees({groupId: groupId}).then(res => {
                        if (res.code === 200) {
                            this.staffId = this.form.ownerId
                            this.staffs = res.data.list
                        }
                    }).catch(() => {
                    });
                }

            },

            //编辑获取 设备类型

            //点击改变标签页
            handleClick(tab, event) {

            },

            //弹窗取消
            cancel() {
                this.dialogVisible = false
                this.activeName = 'first'

                this.$message({type: 'success', message: '取消操作'});
                this.queryVehicle()
            },

            //添加车辆
            insertVehicle(formName) {
                this.$refs[formName].validate((valid) => {
                    this.images = []
                    this.fileList.forEach(item => {
                        this.images.push(item.url)
                    })
                    if (valid) {
                        let groupId = this.form.groupId[this.form.groupId.length - 1];
                        addVehicle({
                            vehicleId: this.form.vehicleId,

                            no: this.form.no,
                            code: this.form.code,
                            groupId: groupId,
                            deviceId: this.deviceId,
                            ownerId: this.staffId,
                            modelId: this.form.deviceType[1],
                            operation: this.form.operation,
                            drivingNo: this.form.drivingNo,
                            operationNo: this.form.operationNo,

                            date1: this.form.date1,
                            date2: this.form.date2,
                            period: this.form.period,
                            inspect: this.form.inspect,
                            compulsory: this.form.compulsory,
                            personLiability: this.form.personLiability,
                            vehicleDamage: this.form.vehicleDamage,
                            insureClaims1: this.form.insureClaims1,
                            insureClaims2: this.form.insureClaims2,
                            insureClaims3: this.form.insureClaims3,
                            medigaps: this.form.medigaps,
                            ownerType: this.form.ownerType,

                            images: this.images

                        }).then(res => {
                            if (res != null && res.code == 200) {
                                this.dialogVisible = false
                                this.queryVehicle()
                                this.$message({type: 'success', message: '保存成功'});
                            }
                            if (res.code == 400) {
                                this.$message({type: 'success', message: '车辆数据已存在！'});
                            }
                        })
                    } else {
                        this.activeName = 'first'
                        return false;
                    }
                });

            },

            //确认关闭对话框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            //查询车辆
            queryVehicle() {
                this.loading = true
                getVehicleInfo({
                    pageNum: this.query.pageNum,
                    no: this.query.no,
                    code: this.query.code,
                    groupId: this.groupId[this.groupId.length - 1]
                }).then(res => {
                    if (res != null && res.code == 200) {
                        this.vehicleList = res.data.list;
                        this.query.total = res.data.count
                    }
                }).finally(() =>
                    this.loading = false
                )
            },

            //导出车辆模板
            downloadBtn() {
                //文件下载
                let a = document.createElement('a')
                a.href = config.baseURL + "/api/web/taxi/ba/vehicle/exportTemplate"
                a.click();
            },

            //通过模板导入数据
            submitUpload() {
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
                this.queryVehicle()
            },
            handlePreview1(file) {
                console.log(file);
            },
            handleRemove1(file, fileList) {
                console.log(file, fileList);
            },
            success1(response) {
                console.log(response)
            },

            //导出车辆
            exportVehicle1() {
                let a = document.createElement('a')
                a.href = config.baseURL + "/api/web/taxi/ba/vehicle/exportVehicles"
                a.click();
            },

            //删除车辆
            deleteOne(data) {
                this.$confirm('删除后将释放已绑定设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (data != null) {
                        this.vehicleIds = []
                        this.vehicleIds.push(data)
                    }
                    deleteVehicle({ids: this.vehicleIds}).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.queryVehicle()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },

            //车辆多选
            selectionchange(val) {
                console.log(val)
                this.vehicleIds = []
                val.forEach(x => {
                    this.vehicleIds.push(x.vehicleId)
                });

            },

            //删除全部
            deleteAll() {
                if (this.vehicleIds.length != 0) {
                    this.$confirm('删除后将释放已绑定设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        console.log(this.vehicleIds)
                        deleteVehicle({ids: this.vehicleIds}).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.queryVehicle()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择车辆'});
                }
            },

            // 分页查询
            pageChange(val) {
                this.query.pageNum = val
                this.queryVehicle()
            },

            //获取 级联树 Cascader 级联选择器
            getTree() {
                //品牌树
                getBrandTree().then(res => {
                    if (res != null && res.code == 200) {
                        this.brandTree = res.data
                    }
                })
            },

        }
        ,

        created() {
            this.groupChange()
            this.queryVehicle()
            this.getTree()
            this.getEnums()
        }

    }

</script>

<style scoped>

    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
    }

</style>
